<template>
  <div>
    <!-- router中的函数需要执行 -->
    <button @click="$router.forward()">前进</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.go(-2)">后退2</button>
    <h1>home</h1>
    <button @click="goMusic">Music</button>
    <button @click="goPlay">Play</button>
    <button @click="goWork">Work</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this)
  },
  // 使用编程式路由时,由于内部的程序,多次点击同一个路由时,第二次的promise对象不会被处理,会返回一个错误的promise,如果不进行处理就会被浏览器
  // 捕获并返回一个错误
  methods: {
    goMusic() {
      // 解决方式1
      // 使用watch捕获返回的错误promise,防止被浏览器检测并报错
      // this.$router.push('/home/music').catch(() => {}) // 使用catch时必须传入参数,否则会触发promise穿透
      this.$router.history.push('/home/music', () => {
        console.log(1)
      })
    },

    // 内部源码
    //   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    //   // $flow-disable-line
    //   if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
    //     return new Promise((resolve, reject) => {
    //       this.history.push(location, resolve, reject)
    //     })
    //   } else {
    //     this.history.push(location, onComplete, onAbort)
    //   }
    // }
    goPlay() {
      // 或者使用程序内置的有第二及第三个参数分别为,当路由切换成功后,路由切换失败后执行的回调函数
      // 添加后,内部就不会返回promise对象,直接执行语句
      this.$router.push(
        {
          name: 'play',
        },
        null,
        () => {}
      )
    },
    goWork() {
      // 但是每次都使用catch或者使用空回调的方式会影响书写体验.所以使用复写push函数的方式实现修改
      this.$router.push({
        path: '/home/work',
      })
    },
  },
}
</script>

<style></style>
